<template>
  <div class="setdiylike">
    <el-row :gutter="10">
      <el-col :span="7">
        <div class="grid-content">
          标题：
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content grid-rgt">
          <el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="7">
        <div class="grid-content">
          背景颜色：
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content grid-rgt">
          <el-color-picker
            v-model="color"
            size="small"
            show-alpha
            :predefine="predefineColors">
          </el-color-picker>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="7">
        <div class="grid-content">
          商品来源：
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content grid-rgt">
          <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["shopMarket"]),
    color: {
      get() {
        console.log(this.shopMarket.color)
        return this.shopMarket.color
      },
      set(val) {
        this.shopMarket.color = val;
        this.$store.commit("shopMarket/set_obj", this.shopMarket)
      }
    },
    input: {
      get() {
        console.log(this.shopMarket.title)
        return this.shopMarket.title
      },
      set(val) {
        this.shopMarket.title = val;
        this.$store.commit("shopMarket/set_obj", this.shopMarket)
      }
    }
  },
  watch: {
    shopMarket: {
      handler(val) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        setTimeout(() => {
          this.$emit("updataNowPageJSON");
        }, 200)
      },
      deep: true
    }
  },
  data() {
    return {
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.setdiylike {
  .grid-content {
    text-align: right;
    min-height: 60px;
    line-height: 60px;
  }
  .grid-rgt {
    text-align: left;
    display: flex;
    align-items: center;
  }
}
</style>
